.main-container {
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
  .section {
    position: absolute;
    top: 50px;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    .menu-box {
      transition: width 0.3s;
      background: var(--menu-bg-color);
      border-right: 1px solid var(--border-color);
      display: flex;
      flex-flow: column;
      .menu-top {
        display: flex;
        align-items: center;
        box-sizing: border-box;
        user-select: none;
        border-bottom: 1px solid var(--border-color);
        .nav-title {
          width: 0;
          flex: 1;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          padding: 10px;
          padding-right: 0;
        }
        .nav-icon {
          box-sizing: border-box;
          cursor: pointer;
          text-align: center;
          line-height: 1;
        }
        .nav-collapse {
          padding: 10px var(--el-menu-base-level-padding);
          width: 64px;
        }
        .nav-expand {
          padding: 10px;
        }
      }
      .nav-menu {
        overflow-x: hidden;
        overflow-y: auto;
        flex: 1;
      }

      .menu-bottom {
        border-top: 1px solid var(--border-color);
        background-color: var(--menu-bottom-bg-color);
        color: var(--menu-bottom-txt-color);
        padding: 4px;
        font-size: 14px;
      }

      .el-menu-item,
      .el-sub-menu__title {
        border-bottom: 1px solid var(--border-color);
      }
      .el-sub-menu.is-active .el-sub-menu__title {
        border-bottom-color: var(--border-color);
      }
      .el-menu-item.is-active {
        background: var(--menu-active-color);
      }
    }
    .content-main {
      width: 0;
      flex: 1;
      position: relative;
      background: linear-gradient(
        180deg,
        var(--main-bg-color) 0%,
        var(--main-bg-color2) 100%
      );
      .top-nav {
        height: 40px;
        background: var(--top-nav-bg-color);
        .el-tabs__item {
          color: var(--txt-color666);
        }
        .el-tabs__item.is-active {
          background: var(--main-bg-color);
          color: var(--txt-color000);
        }
        .el-tabs__item:hover {
          background: var(--main-bg-color);
          color: var(--txt-color000);
        }
      }
      .iframe-box {
        padding: 8px;
        padding-bottom: 0;
        overflow: auto;
        position: relative;
        border-radius: 8px;
        .iframe {
          border-radius: 8px;
        }
        .progress {
          position: absolute;
          right: 0;
          left: 0;
          top: 1px;
        }
        :deep(.el-progress-bar__outer) {
          background-color: transparent;
        }
      }
      .iframe {
        width: 100%;
        height: calc(100vh - 107px);
        border: none;
        outline: none;
      }
    }
  }
}
.el-scrollbar__thumb,
.el-scrollbar__thumb:hover {
  background-color: var(--scrollbar-bg-color) !important;
  opacity: 1 !important;
}
/* 滚动条样式 */
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
/* 滚动条滑块样式 */
::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-bg-color);
  border-radius: 10px;
}
/* 滚动条轨道样式 */
::-webkit-scrollbar-track {
  background-color: transparent;
  border-radius: 10px;
}
